<template>
    <div>
        <el-table
            :data="dataList"
            border
            tooltip-effect="dark"
            :span-method="objectSpanMethod"
            style="width: 100%">
            <slot></slot>
        </el-table>
    </div>
</template>

<script>
    export default {
        props:['dataList','rowSet','sameAttr'],
        data() {
            return {
                spanArr: [],
                mergeNum : '',   //数组合并的条数(判断spanArr里0的个数)
                position: 0
            }
        },
        watch: {
            dataList(){
                this.spanArr = [];   //清空数据
                this.rowspan();
            }
        },
        created(){
            this.rowspan();
        },
        methods: {
            //统计需要合并的行数据方法
            rowspan(){
                if(this.dataList && this.dataList.length > 0){
                    this.dataList.forEach((item,index) => {
                        if( index === 0){
                            this.spanArr.push(1);
                            this.position = 0;
                        }else{
                            //判断此条数据和前一条数据是否同属于一组
                            if(this.dataList[index][this.sameAttr] === this.dataList[index-1][this.sameAttr] ){
                                this.spanArr[this.position] += 1;
                                this.spanArr.push(0);
                            }else{
                                this.spanArr.push(1);
                                this.position = index;
                            }
                        }
                    })
                }else{
                    return;
                }
                this.mergeNum = this.util.fnNumber.sameNum(this.spanArr,0);
            },
            //合并行方法
            objectSpanMethod({ row, column, rowIndex, columnIndex }){
                if (this.rowSet.indexOf(columnIndex) > -1) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row >0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            }
        }
    }

</script>